<template>
  <div class="travelExpenses" id="printForm">
    <div class="travelExpenses-head">
      <div class="travelExpenses-head-top">
        <div class="travelExpenses-head-text">
          <h1 class="travelExpenses-head-text-1">报账单</h1>
          <p class="travelExpenses-head-text-2">(局机关)</p>
          <p class="travelExpenses-head-text-3">{{ objData.reimbursementDate?.substring(0,10) }}</p>
        </div>
        <div class="travelExpenses-head-name">单位名称:广州市海珠区国有土地上房屋征收中心</div>
        <div class="travelExpenses-head-bo">
          <p>部门: {{ showIdLabel(organizationList, expenditureApplicationObj.applicationOrganizationId, 'organizationName') }}</p>
          <p>单据号:{{ objData.reimbursementCode }}</p>
        </div>
      </div>
      <img :src="objData.qrcode" class="travelExpenses-code" alt="" width="100" height="100" />
    </div>
    <table width="100%" height="500px" border="1" align="center" cellpadding="1" cellspacing="1" class="table-form-1">
      <tr>
        <td colspan="4">摘要</td>
        <td colspan="1">金额（元）</td>
        <td colspan="2">结算方式</td>
        <td colspan="2">备注</td>
      </tr>
      <tr>
        <td colspan="4">{{ objData.summary }}</td>
        <td colspan="1">{{ objData.amount }}</td>
        <td colspan="2"><DictTag :dict-list="getDictList('ExpenditureSettlement')" :dict-key="objData.settlement" /></td>
        <td colspan="2">{{ objData.remark }}</td>
      </tr>
      <tr>
        <td colspan="3">金额大写：</td>
        <td colspan="7">{{ DX(objData.amount) }}</td>
        <td>合计</td>
        <td colspan="3">￥{{ objData.amount }}</td>
      </tr>
      <tr>
        <td>分管领导审批</td>
        <td colspan="3"></td>
        <td>局主要领导审批</td>
        <td colspan="4"></td>
      </tr>
    </table>
    <div class="sign">
      <div class="sign-list">
        <span>经办人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>证明人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>部门负责人：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>核准：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>会计：</span>
        <span></span>
      </div>
      <div class="sign-list">
        <span>出纳：</span>
        <span></span>
      </div>
    </div>
  </div>
  <div style="margin-top: 20px;">
    <el-button type="primary" v-print="'#printForm'" @click="doPrint">打印</el-button>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, showIdLabel, DX, genQrcodeStr, getListPageSize, getDictList} from "@/config/common";
import initListStore from '@/store/modules/initList'

const props = defineProps({
  objData: {
    required: true,
    type: Object,
  },
  expenditureApplicationObj: {
    required: true,
    type: Object,
  },
})
const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
// let activeName = ref('first')
// 基本数据
let objData = ref({})

let expenditureApplicationObj = ref({})

// 附件
let fileList = ref([])


// 单位列表
// let governmentList = initListStore().governmentList
// 主管部门
let organizationList = initListStore().organizationList

// const userList = ref([])
// const expenditurePtypeList = ref([])
// const expenditureFunctionalList = ref([])
// const expenditureEconomicList = ref([])
// const expenditureFiscalList = ref([])
// const expenditureSubjectList = ref([])

// let attachmentVisible = ref(false)

// async function initList() {
//   let p1 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1, p2])
//   // 单位列表
//   governmentList.value = resArray[0]['records']
//   // 主管部门
//   organizationList.value = resArray[1]['records']
// }

watch(() => [props.objData, props.expenditureApplicationObj], async vals => {
  // await initList()
  objData.value = vals[0]
  expenditureApplicationObj.value = vals[1]
  let str = genQrcodeStr("expenditure.reimbursement", objData.value.id, objData.value['reimbursementCode'])
  let img = await doGet(svc, '/customCode/qrcode', {content: str, width:100, height:100}, false)
  objData.value.qrcode = 'data:image/gif;base64,' + img
},{immediate:true})

function doPrint() {
  console.log("doPrint", objData.value)
}
</script>

<style scoped>
.travelExpenses {
  width: 100%;
}
.travelExpenses-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.travelExpenses-code {
  width: 100px;
  height: 100px;
}
.travelExpenses-head-top {
  width: 100%;
}
.travelExpenses-head-text {
  width: 100%;
}
.travelExpenses-head-text-1 {
  text-align: center;
  padding: 0;
  margin: 0;
  font-weight: bold;
}
.travelExpenses-head-text-2 {
  font-size: 16px;
  padding: 0;
  text-align: center;
  margin: 10px 0 0;
}
.travelExpenses-head-text-3 {
  font-size: 16px;
  padding: 0;
  text-align: center;
  margin: 10px 0 0;
}
.travelExpenses-head-name {
  margin: 10px 0;
  font-size: 16px;
}
.travelExpenses-head-bo {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-form-1 {
  border-collapse: collapse;
  text-align:center;
  table-layout:fixed;
  margin-top: 10px;
}
td {
  padding: 10px 0;
}
.sign {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sign-list {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-top: 20px;
}
.sign-list span:nth-child(1) {
  display: inline-block;
  width: 100px;
  text-align: right;
}
.sign-list span:nth-child(2) {
  display: inline-block;
  width: 300px;
  background: red;
}
</style>
